<template>
  <view>
    <view class="search-wrap">
      <u-input
        v-model="searchParams.coursewareName"
        placeholder="请输入"
        border="none"
        shape="circle"
        :customStyle="{
          background: '#EFEFEF',
          height: '60rpx',
          paddingLeft: '30rpx',
          marginRight: '23rpx'
        }"
      >
        <template slot="suffix">
          <view class="search-button" @click="handleSearch">搜索</view>
        </template>
      </u-input>
      <u--image
        src="/static/images/study-garden/filter.png"
        width="48rpx"
        height="48rpx"
        @click="showFilter"
      ></u--image>
    </view>

    <view class="list-wrap" v-if="coursewareList.length > 0">
      <view class="list-item-wrap" v-for="(item, index) in coursewareList" :key="index" @click="toStudyPage(item)">
        <u--image
          v-if="item.fileType !== '1'"
          src="/static/images/study-garden/pdf-icon.png"
          width="174rpx"
          height="150rpx"
        ></u--image>
        <u--image v-else src="/static/images/study-garden/video-icon.png" width="174rpx" height="150rpx"></u--image>
        <view class="content">
          <view class="title u-line-2">{{ item.coursewareName || '--' }}</view>
          <view class="views">{{ item.viewNum || 0 }}人浏览</view>
        </view>
      </view>
    </view>

    <CuEmpty v-else></CuEmpty>

    <view class="study-time-wrap">
      <u--image src="/static/images/study-garden/clock.png" width="30rpx" height="30rpx"></u--image>
      <view class="time"> 个人累计学习时长：{{ learnTimeText }} </view>
    </view>
  </view>
</template>

<script>
import { getCoursewareCount, getCoursewareList } from '@/api/studyGarden/index.js'
import CuEmpty from '@/components/cu-empty/index.vue'
export default {
  components: {
    CuEmpty
  },
  data() {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        coursewareName: '',
        coursewareType: '',
        coursewareTypeLabel: '',
        deptId: '',
        deptIdLabel: '',
        learnGardenFlag: 0 // 学习园地自主学习，0-是，1-否
      },
      total: 0,
      filterVisible: false, // 展示筛选条件
      coursewareList: [],
      learnTimeText: '0秒'
    }
  },
  onShow() {
    setTimeout(() => {
      this.getCoursewareCount()
      this.handleSearch()
    }, 200)
  },
  onPullDownRefresh() {
    this.handleSearch()
  },
  onReachBottom() {
    this.searchParams.pageNum++
    this.getCoursewareList()
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/studyGarden/studyRecord/index'
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getCoursewareCount()
      this.getCoursewareList()
    },
    handleSearch() {
      this.total = 0
      this.searchParams.pageNum = 1
      this.getCoursewareList()
    },
    getCoursewareCount() {
      getCoursewareCount().then((res) => {
        this.learnTimeText = res.data.countName
      })
    },
    getCoursewareList() {
      if (!this.total || this.total > this.coursewareList.length) {
        getCoursewareList({
          ...this.searchParams,
          showLoading: false
        })
          .then((res) => {
            if (this.searchParams.pageNum === 1) {
              this.coursewareList = res.rows
            } else {
              this.coursewareList = this.coursewareList.concat(res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    },
    toStudyPage(item) {
      if (item.fileType === '1') {
        uni.navigateTo({
          url: `/pages/studyGarden/studyPage/studyVideo?id=${item.coursewareId}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/studyGarden/studyPage/studyPdf?id=${item.coursewareId}&url=${item.fileUrl}`
        })
      }
    },
    showFilter() {
      uni.navigateTo({
        url: `/pages/studyGarden/studyFilter/studyFilter${uni.$u.queryParams(this.searchParams)}`,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          'callback:success': ({ data }) => {
            console.log(data)
            this.searchParams.deptId = data.deptId
            this.searchParams.deptIdLabel = data.deptIdLabel
            this.searchParams.coursewareType = data.coursewareType
            this.searchParams.coursewareTypeLabel = data.coursewareTypeLabel
            this.searchParams.coursewareName = data.coursewareName
            console.log(this.searchParams)
            this.handleSearch()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrap {
  border-top: 1px solid #ebebeb;
  background: #ffffff;
  height: 100rpx;
  padding: 20rpx 34rpx 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.search-button {
  width: 110rpx;
  line-height: 60rpx;
  border-radius: 606rpx;
  background: #88b4c4;
  color: #ffffff;
  font-size: 28rpx;
  text-align: center;
}

.list-wrap {
  padding: 30rpx 30rpx 100rpx 30rpx;

  .list-item-wrap {
    display: flex;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .content {
      margin-left: 20rpx;
      padding-top: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 30rpx;
        color: #333333;
      }

      .views {
        font-size: 24rpx;
        color: #bbbbbb;
      }
    }
  }
}

.study-time-wrap {
  position: fixed;
  /* #ifdef H5 */
  bottom: 100rpx;
  /* #endif */
  /* #ifdef APP */
  bottom: 0;
  /* #endif */
  border-bottom: 1px solid #f5f5f5;
  left: 0;
  right: 0;
  background: #ffffff;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #666666;

  .time {
    margin-left: 20rpx;
  }
}
</style>
